<style rel="styleesheet" lang="less">
  @media screen and (min-width: 829px) {
    #collogeInfo {
      background-color: #F6F7FB;
      /*position: relative;*/
      .shareQr {
        z-index: 2;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        top: 0;
        right: 0;
        .qrShadow {
          z-index: 3;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: #020C18;
          opacity: 0.3;
        }
        .img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          z-index: 9;
          width: 40rem;
          height: 40rem;
          background-color: white;
          .shareWordQr{
            width: 100%;
            height: 2rem;
            text-align: center;
            margin-top: 4rem;
            font-size: 2rem;
          }
          /*display: flex;*/
          /*justify-content: center;*/
          /*align-items: center;*/
          img {
            position: absolute;
            z-index: 999;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: block;
            width: 20rem;
            height: 20rem;
          }
        }
      }
      .content {
        max-width: 1050px;
        width: 68%;
        margin: 0 auto;
        padding-bottom: 2rem;
      }
      .shareWrap {
        display: none;
      }
      .panelWrap {
        position: relative;
        width: 100%;
        /*padding: 0 0.35rem;*/
        background-color: #fff;
        display: block;
        .panel {
          /*display: block;*/
          /*max-width: 100%;*/
          width: 100%;
          /*max-width:78.57rem;*/
          /*height: 37.14rem;*/
          /*height: auto;*/
          max-height: 37.14rem;
          padding: 0;
        }
      }

      .shadow {
        /*margin-left: 1rem;*/
        position: absolute;
        /*width:78.57rem;*/
        width: 100%;
        /*margin-left:1%;*/
        height: 6.2rem;
        bottom: 0;
        left: 0;
        /*left: 5px;*/
        /*background-color: #000000;*/
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0.05)), to(#000000));
        /*opacity: .4;*/
      }
      .active-title_pc {
        display: inline-block;
        color: white;
        margin-top: 2.5rem;
        margin-left: 2.86rem;
        font-size: 1.57rem;
        z-index: 11;
      }
      .share {
        display: inline-block;
        float: right;
        /*display: block;*/
        margin-top: 2.4rem;
        margin-right: 2.06rem;
        font-size: 2.3rem;
        z-index: 11;
        cursor: pointer;
        color: white;
      }
      .content-text {
        font-size: 1rem;
        color: #333;
        img{
          box-sizing: border-box !important;
          padding: 0 15% !important;
          width: 100% !important;
          height: initial !important;
        }
        margin-top: 1.5rem;
        .a-i-title {
          display: none
        }
      }
      .active-info {
        margin-top: 0.3rem;overflow: hidden;
        .active-time,.active-address{float:left}
        .active-address{margin-left: 50px;}
        dd {
          margin-top: 0.8rem;
        }
        .a-i-title {
          color: #999999;
          display: block;
        }
        .a-i-text {
          color: #666666;
          display: block;
        }
      }
      #sign {
        width: 10rem;
        margin-top: 0.5rem;
        height: 2.57rem;
        line-height: 2.57rem;
        font-size: 1.16rem;
      }
      .btn-box {
        border-bottom: solid 1px #ccc;
        float: right;
        margin-top: -3rem;
      }
      .active-title {
        display: none
      }

    }
  }

  @media screen and (max-width: 829px) {
    #collogeInfo {
      background-color: #F6F7FB;
      * {
        box-sizing: border-box;
      }

      .content {
      }
      .active-title {
        background-color: #fff;
        font-size: 0.54rem;
        color: #1a1a1a;
        width: 100%;
        padding: 0.45rem 0.35rem;
      }
      .panelWrap {
        min-height: 3.27rem;
      }
      .panel {
        position: absolute;
        width: 100%;
        padding: 0 0.35rem;
        background-color: #fff;
        display: block;
        /*height: auto;*/
        height: 3rem;

      }
      .content-text {
        color: #3E3A39;
        font-size: 0.32rem;
        padding: 0.1rem 0.35rem 0.3rem 0.35rem;
        background-color: #fff;
        line-height: 0.5rem;
        position: relative;
      }
      .a-i-title {
        display: block;
        color: #1a1a1a;
        font-size: 0.34rem;
        padding: 0.15rem 0;
        position: relative;
        padding-left: 0.5rem;
      }
      .a-i-title:before {
        content: ' ';
        background-size: 100% 100%;
        position: absolute;
        display: block;
        width: 0.3rem;
        height: 0.3rem;
        left: 0;
        top: 0.24rem;
      }

      .one:before{
        background-image: url('../../static/img/活动简介.png');
      }
      .two:before{
        background-image: url('../../static/img/时间.png');
      }
      .three:before{
        background-image: url('../../static/img/地点.png');
      }
      .four:before{
        background-image: url('../../static/img/项目介绍.png');
      }
      .active-info {
        dd {
          background-color: #fff;
          margin-top: 0.2rem;
          padding: 0.1rem 0.35rem 0.3rem 0.35rem;
        }
      }
      .a-i-text {
        color: #3E3A39;
        font-size: 0.3rem;
      }
      .btn-box {
        padding: 0.4rem 0.35rem;
        background-color: #fff;
        margin: 0.2rem 0;
      }
      #sign {
        width: 100%;
        line-height: 0.9rem;
        font-size: 0.32rem;
      }
      .introduction {
        color: #A4A4A4;
      }

      .shareWrap {
        z-index: 3;
        /*position: absolute;*/
        position: fixed;
        width: 1.14rem;
        height: 1.14rem;
        border-radius: 50%;
        background-color: rgba(253, 157, 64, 1);
        /*right: 0.5rem;*/
        /*top: 2.6rem;*/
        top: 68%;
        left: 72%;
        color: white;
        cursor: pointer;
        .icon {
          font-size: 0.41rem;
          position: absolute;
          right: .37rem;
          top: .14rem;
        }
        .shareword {
          font-size: 0.3rem;
          position: absolute;
          right: .28rem;
          bottom: .15rem;
        }
      }

      .shareQr {
        z-index: 2;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        top: 0;
        right: 0;
        .qrShadow {
          z-index: 3;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: #020C18;
          opacity: 0.3;
        }
        .img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          z-index: 9;
          width: 5.04rem;
          height: 4.76rem;
          background-color: white;
          border-radius: 5px;
          .shareWordQr{
            width: 100%;
            height: .3rem;
            text-align: center;
            margin-top: .5rem;
            font-size: 0.3rem;
          }
          /*display: flex;*/
          /*justify-content: center;*/
          /*align-items: center;*/
          img {
            position: absolute;
            z-index: 999;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: block;
            width: 2.5rem;
            height: 2.38rem;
          }
        }
      }
    }
  }

</style>
<template>
  <div id="collogeInfo" class="activeInfo">
    <!--<div class="shareWrap" @click="share">-->
      <!--<span class="icon icon-share"></span>-->
      <!--<span class="shareword">分享</span>-->
    <!--</div>-->
    <div class="content">
      <div class="active-title">{{collegeInfo.title}}</div>
      <div class="panelWrap">
        <img class="panel" v-bind:src="collegeInfo.showImageUrl">
        <div class="shadow">
          <div class="active-title_pc">{{collegeInfo.title}}</div>
          <!--<span class="icon icon-share share" @click="share"></span>-->
        </div>
      </div>

      <dl class="active-info">
        <dd class="active-time">
          <span class="a-i-title two">活动时间:</span>
          <span class="a-i-text">{{collegeInfo.extendInfo | timeStar}}~{{collegeInfo.extendInfo | timeEnd}}</span>
          <!--<span class="a-i-text">{{$bw.format(collegeInfo.extendInfo.StartTime,'dateTime')}}~{{$bw.format(collegeInfo.extendInfo.EndTime,'dateTime')}}</span>-->
        </dd>
        <dd class="active-address">
          <span class="a-i-title three">活动地点:</span>
          <span class="a-i-text">{{collegeInfo.extendInfo | address}}</span>
        </dd>
      </dl>

      <div class="btn-box" v-show="collegeInfo.categoryCode==1">
        <span id="sign" class="bw-btn bw-btn-warning" @click="sign">报名</span>
      </div>
      <div class="content-text">
        <span class="a-i-title one">活动简介</span>
        {{collegeInfo.abstract}}
      </div>
      <div class="content-text introduction">
        <span class="a-i-title four">项目介绍</span><span v-html="collegeInfo.body"></span>
      </div>
    </div>

    <section class="shareQr" v-show="showQr" @click="colseShowQr">
      <div class="qrShadow"></div>
      <div class="img">
        <div class="shareWordQr">扫描二维码分享</div>

        <img :src="qr" alt="">
      </div>

    </section>
  </div>

</template>
<script>
  export default {
    data() {
      return {
        collegeInfo: {},
        showQr: false,
        qr: ''
      }
    },
    methods: {
      colseShowQr() {
        this.showQr = false
      },
      share() {
        let hash = window.location.href
        let newUrl = escape(hash)
        this.$service('/api/CMSMain/GetQRCode?data=' + newUrl, 'get', {}).then((response) => {
//          console.log(response)
          this.qr = response.Data
          this.showQr = true
        })
          .catch(err => {
            this.fullscreenLoading = false;
          })
      },
      sign() {
        this.$router.push({path: '/activeApply', query: {contentId: this.collegeInfo.contentId}})
      },
      getCollegeInfo() {
        this.fullscreenLoading = true;
        let contentId = this.$route.query.contentId
        this.$service('/api/CMSMain/GetContentDetail?contentId=' + contentId, 'get', {}).then((response) => {
          this.fullscreenLoading = false;
//          console.log(response)
          this.collegeInfo = response.Data
        })
          .catch(err => {
            this.fullscreenLoading = false;
          })
      },

    },
    mounted() {
      this.getCollegeInfo();
    },
    props: ['rootInfo'],
    filters: {
      address(val) {
        if(!val)return'';
        let obj={};
        eval("obj ="+val);
        return obj.Address
      },
      timeStar(val) {
        if(!val)return'';
        let obj={};
        eval("obj ="+val);
        return obj.StartTime.replace('T',' ').substring(0,16)
      },
      timeEnd(val) {
        if(!val)return'';
        let obj={};
        eval("obj ="+val);
        return obj.EndTime.replace('T',' ').substring(0,16)
      },
    },
  }

</script>
